<template>
  <div style="width: 100%; height: 100%">
    <div style="height: 5%; width: 90%; margin: 10px 0px 0 10px">
      <div style="float: left">
        <img slot="item-icon" src="@/assets/img/document/document.png" />&nbsp;
      </div>
      <span style="font-size: 20px">公文统计</span>
    </div>
    <el-divider></el-divider>
    <!-- 年度收文 -->
    <div style="height: 15%; text-align: center; width: 100%">
      <div style="width: 25%; float: left; margin-top: 5%">
        <span style="font-size: 15px"
          >年度收文数量
          <br />
          <span style="font-weight:600">{{ receiving.number }}份</span>
          <br />
          <span style="color: red">{{ receiving.percentage }} </span>
        </span>
      </div>
      <div id="myChart1" style="float: left; margin-top: -10%"></div>
    </div>
    <el-divider></el-divider>
    <!-- 年度发文 -->
    <div style="height: 15%; text-align: center; width: 100%">
      <div>
        <div style="width: 25%; float: left; margin-top: 0%">
          <span style="font-size: 15px"
            >年度发文数量<br />
            <span style="font-weight:600">{{ receiving.number }}份</span>
            <br />
            <span style="color: red">{{ receiving.percentage }}</span></span
          >
        </div>
          <div id="myChart2" style="float: left; margin-top: -15%"></div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 发文类型统计  -->
    <div style="height: 25%">
      <div style="margin-top: -5%;width:100%;float:left;margin-left:2%">
        <div style="float: left; margin: -3px">
          <img slot="item-icon" src="@/assets/img/document/long.png" />&nbsp;
        </div>
        <span style="font-size: 16px">发文类型统计 </span>
      </div>
      <div style="width: 100%; height: 90%;float:left;margin-top:0%;margin-left:2%">
        <div id="myChart3" ></div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 收文类型统计  -->
    <div style="height: 25%">
      <div style="margin: 10px">
        <div style="float: left; margin: -3px">
          <img slot="item-icon" src="@/assets/img/document/long.png" />&nbsp;
        </div>
        <span style="font-size: 16px">收文类型统计 </span>
      </div>
      <div style="width: 100%; height: 90%;float:left;margin-top:0%;margin-left:2%">
        <div id="myChart4" ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Statistics",
  data() {
    return {
      receiving: {
        number: 0,
        percentage: "+0.22%",
      },
    };
  },
  created() {},
  mounted() {
    this.drawLineSW();
    this.drawLineFW();
    this.drawCricleSW();
    this.drawCricleFW();
  },
  methods: {
    // 年度收文柱状图表
    drawLineSW() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "350px",
        height: "200px",
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
              interval: 0,
            },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
    // 年度发文柱状图表
    drawLineFW() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "350px",
        height: "200px",
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          axisLabel: {
              interval: 0,
            },
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
            type: "bar",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 饼图图表
    drawCricleSW() {
      let myChart = this.$echarts.init(document.getElementById("myChart3"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "430px",
        height: "150px",
      });
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "right",
          let:"2%"
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "其他发文" },
              { value: 735, name: "工会发文" },
              { value: 580, name: "行政发文" },
              { value: 484, name: "集团发文" },
              { value: 300, name: "党委发文" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 饼图发文图表
    drawCricleFW() {
      let myChart = this.$echarts.init(document.getElementById("myChart4"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "430px",
        height: "150px",
      });
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          right: "right",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "其他发文" },
              { value: 735, name: "工会发文" },
              { value: 580, name: "行政发文" },
              { value: 484, name: "集团发文" },
              { value: 300, name: "党委发文" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.el-divider--horizontal {
  margin: 10px 0px;
}
.gwtj {
  image: url("../../assets/img/document/document.png");
}
</style>